<!-- 环境设计 -->
<template>
    <div class="environ-designe-wrapper hp100">
        <!-- <Button type="primary" @click="openDesignModal">环境设计</Button>
        <Modal
            v-model="designModal.show"
            :title="designModal.title"
            @on-ok="createProject"
            :width="600"
            :loading="designModal.loading"
        > -->
        <Card class="environ-design-card" dis-hover>
            <template #title><h2>环境设计</h2></template>
            <div v-show = "step === 1" style="flex: auto;padding: 20px;overflow: auto;">
                <RadioGroup v-model="edit.curSelectType" vertical>
                    <Radio v-for="type in edit.templateSelectType" class="design-type-wrapper" :class="{'design-type-checked':edit.curSelectType === type.value}"
                        :key="type.value"
                        :label="type.value">
                        <Icon type="social-apple"></Icon>
                        <span>{{ type.title }}</span>
                    </Radio>
                </RadioGroup>
                <!-- <ul class="template-list">
                    <li v-for="type in edit.templateSelectType" :key="type.value" class="template-item">
                        <div class="template-img">
                            <img :src="template.picUrl" width="100%" height="100%"/>
                        </div>
                        <div class="template-content">
                            <h4 class="template-title text-ellipsis">{{type.title}}</h4>
                            <div class="template-info">
                                <p v-if="edit.curSelectType === 'projectTemplate'" class="text-ellipsis">
                                    <span>描述：</span>
                                    <span>{{type.description}}</span>
                                </p>
                            </div>
                        </div>
                    </li>
                </ul> -->
            </div>
            <div v-show="step === 2">
                <template v-if="edit.curSelectType === 'projectTemplate' || edit.curSelectType === 'research'">
                    <!-- <Button
                        type="primary"
                        class="template-type w150"
                        :ghost="edit.curTemplateType === '0' ? false : true"
                        @click="refreshTem('0')"
                    >
                        普通模板
                    </Button>
                    <Button
                        type="primary"
                        class="template-type w150"
                        :ghost="edit.curTemplateType === 'base' ? false : true"
                        @click="refreshTem('base')"
                    >
                        基础模板
                    </Button> -->
                    <PageLayout class="hp100 list-wrapper">
                        <template slot="top"> 
                            <div class="drawer-title">
                                {{ edit.curTemplateType === 'research' ? '内置模板' : '工程模板' }}
                            </div>
                            <div class="search-wrapper m-0">
                                <Select filterable
                                    v-if="edit.curTemplateType === 'research'"
                                    v-model="searchTemType"
                                    @on-change="changeTemType"
                                    placeholder="请选择内置类型"
                                    clearable
                                    filterable
                                >
                                    <Option v-for="type in typeRecordData" :key="type.id" :value="type.id">{{
                                        type.value
                                    }}</Option>
                                </Select>
                                <Select filterable
                                    v-if="edit.curTemplateType === 'projectTemplate'"
                                    v-model="searchTemType"
                                    @on-change="changeTemType"
                                    placeholder="请选择模板类型"
                                    clearable
                                    filterable
                                >
                                    <Option value="0">基础模板</Option>
                                    <Option value="base">普通模板</Option>
                                </Select>
                                <Select filterable
                                    v-if="edit.curTemplateType !== 'research'"
                                    clearable
                                    placeholder="请选择可见范围"
                                    v-model="selectProTemModel"
                                    @on-change="changeTemplate"
                                >
                                    <Option value="public">系统</Option>
                                    <Option value="share">单位</Option>
                                    <Option value="private">个人</Option>
                                </Select>
                                <Input
                                    v-model.trim="searchTemNameInput"
                                    placeholder="模板名称"
                                    clearable
                                    @on-change="searchTemNameBtn"
                                />
                                <Button
                                    class="header-btn"
                                    type="primary"
                                    @click="refreshTem(edit.curTemplateType,true)"
                                    ><i class="el-icon-refresh-right"
                                /></Button>
                            </div>
                        </template>
                        <template slot="content">
                            <ul class="template-list">
                                <li v-for="template in templateList" :key="template.matchId" class="template-item">
                                    <div class="template-img">
                                        <img :src="template.picUrl" width="100%" height="100%"/>
                                    </div>
                                    <div class="template-content">
                                        <h4 class="template-title text-ellipsis">{{template.name}}</h4>
                                        <div class="template-info">
                                            <p v-if="edit.curSelectType === 'projectTemplate'" class="text-ellipsis">
                                                <span>可见范围：</span>
                                                <span :style="{color: handlePublic(template.visibility).color}">{{handlePublic(template.visibility).text}}</span>
                                            </p>
                                            <p v-if="edit.curSelectType === 'research'" class="text-ellipsis">
                                                <span>类型：</span>
                                                <span>{{template.typeName}}</span>
                                            </p>
                                            <p class="text-ellipsis">
                                                <span>描述：</span>
                                                <span>{{template.description}}</span>
                                            </p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <Page :current="templatePage" :size="templatePageSize" :total="templateTotal"></Page>
                            <!-- <TableList
                                v-if="addDeviceModel"
                                :columns="getTemplateCol()"
                                :data="templateList"
                                :total="templateTotal"
                                :page="templatePage"
                                :loading="proTemLoading"
                                :max-height="setUserTableHei"
                                @change-page="temOnChange"
                                @init-page-size="setPageAndSize"
                            ></TableList> -->
                        </template>
                        <!--   :size="templatePageSize" -->
                        <!--   :max-height="setUserTableHei" -->
                    </PageLayout>
                </template>
                <template v-if="edit.curSelectType === 'image'">
                    <GenerateTemplate @on-success="getTemplateInfo"></GenerateTemplate>
                </template>
                <template v-if="edit.curSelectType === 'exper'">
                    <ExperTemplate @on-select="getTemplateInfo"></ExperTemplate>
                </template>
                <template v-if="edit.curSelectType === 'upload'">
                    <ImportTemplate @on-success="getTemplateInfo"></ImportTemplate>
                </template>
                <template v-if="edit.curSelectType === 'topo'">
                    创建空白环境后，请在工作台拓扑模块点击自定义编辑进入拓扑编辑页面，编辑完成后需保存科研
                    <!--<TopoTemplate @on-success="getTemplateInfo"></TopoTemplate>-->
                </template>
            </div>
            <div class="flex-between design-op-wrapper">
                <template v-if="step === 1">
                    <Button type="primary" size="large" ghost long style="border:none;border-radius: 0;">返回列表页</Button>
                    <Divider type="vertical"></Divider>
                    <Button type="primary" size="large" ghost long style="border:none;border-radius: 0;" @click="changeStep(2)">下一步</Button>
                </template>
                <template v-else>
                    <Button type="primary" size="large" ghost long style="border:none;border-radius: 0;" @click="changeStep(1)">上一步</Button>
                    <Divider type="vertical"></Divider>
                    <Button type="primary" size="large" ghost long style="border:none;border-radius: 0;" @click="createProject">创建环境</Button>
                </template>
            </div>
        </Card>
        <!-- </Modal> -->
        <Modal v-model="desModal.show" :z-index="4000" :width="800" title="描述" footer-hide class-name="fix-height-modal">
            <div v-html="desModal.content" style="font-size:14px;" class="html-content ql-editor"></div>
        </Modal>
        <TemplateDetailModal :z-index="4000" ref="templateDetailModal" :request="edit.curTemplateType === 'research' ? true : false"></TemplateDetailModal>
    </div>
</template>
<script>
import PageLayout from '@/components/common/page';
import UploadFile from './components/upload';
import GenerateTemplate from './components/generate-template';
import ExperTemplate from './components/exper-template';
import ImportTemplate from './components/import-template';
import TopoTemplate from './components/topo-template';
import ItemUpload from '@/components/item-upload';
import TableList from '@/components/common/table-list';
import TemplateDetailModal from '@/view/research/template/detail.vue'
import { updateContent } from '@/api/scientific/content.js';
import { copyContentRelation } from '@/api/scientific/contentRelation.js';
import { getTemplateData } from '@/api/proTemplate.js';
import { creatBlankPro } from '@/api/deploy';
import { queryTemplRelation } from '@/api/scientific/templRelation.js';
import { typeRecordMixin } from '@/mixin/research';
export default {
    name: 'BaseInfo',
    components: {
        UploadFile,
        GenerateTemplate,
        ImportTemplate,
        ItemUpload,
        TableList,
        PageLayout,
        ExperTemplate,
        TopoTemplate,
        TemplateDetailModal
    },
    inject: ['detailParent'],
    props: {
        // type: {
        //     type: String,
        //     default: 'template',
        // },
        // contentDetail: {
        //     type: Object,
        //     default: () => {
        //         return { id: '', name: '' };
        //     }
        // }
    },
    mixins: [typeRecordMixin],
    data() {
        const validateTempl = (rule, value, callback) => {
            callback();
            return;
            //验证警戒值
            if (!this.formValidate.tmplId && this.edit.curSelectType !== 'topo') {
                if (this.formValidate.internal === 1) {
                    callback(new Error('请选择模板'));
                } else {
                    callback(new Error('请先选择或生成模板'));
                }
            } else {
                callback();
            }
        };
        return {
            step:1,
            designModal: {
                show: false,
                title: '模板选择',
                loading: true,
            },
            searchTemType:'',
            edit: {
                templateSelectType: [
                    {
                        title: '内置模板',
                        value: 'research',
                    },
                    {
                        title: '工程模板',
                        value: 'projectTemplate',
                    },
                    {
                        title: '镜像选择',
                        value: 'image',
                    },
                    // {
                    //     title: '科研选择',
                    //     value: 'exper',
                    // },
                    {
                        title: '导入模板',
                        value: 'upload',
                    },
                    {
                        title: '新建空白环境',
                        value: 'topo',
                    },
                ],
                curSelectType: 'projectTemplate',
                curTemplateType: 0,
            },
            resource: {
                tool: 1,
                document: 2,
                video: 3,
            },
            formValidate: {
                internal: 1,
                typeId: '',
                tmplId: '',
                tmplName: ''
            },
            ruleValidate: {
                internal: [
                    {
                        type: 'number',
                        required: true,
                        trigger: 'change',
                        message: '请选择',
                    },
                ],
                typeId: [
                    {
                        required: true,
                        trigger: 'change',
                        message: '请选择内置类型',
                    },
                ],
                tmplId: [
                    {
                        required: true,
                        trigger: 'change',
                        validator: validateTempl,
                    },
                ]
                // tmplName: [
                //     {
                //         required: true,
                //         trigger: 'change'
                //     }
                // ]
            },
            // allContentRelation: [],
            // 工程模板
            addDeviceModel: false,
            templatePage: 1,
            templatePageSize: 14,
            templateTotal: 0,
            templateList: [],
            templateCol: [
                {
                    type: 'index',
                    width: 60,
                    align: 'left',
                },
                {
                    title: '模板名称',
                    key: 'name',
                    align: 'left',
                    tooltip:true
                },
                {
                    title: '可见范围',
                    key: 'visibility',
                    align: 'left',
                    render: (h, params) => {
                        return h(
                            'div',
                            {
                                style: {
                                    color: this.handlePublic(params.row.visibility).color,
                                },
                            },
                            this.handlePublic(params.row.visibility).text
                        );
                    },
                },
                {
                    title: '类型',
                    key: 'typeName',
                    placement: 'top-left',
                    width: 200,
                    tooltip: true,
                },
                {
                    type:'html',
                    title: '描述',
                    key: 'description',
                    align: 'left',
                    render: (h, params) => {
                        return h('span', {
                            domProps: {
                                innerHTML: params.row.description.replace(/\<br\>/g, '')
                            },
                            class:'html-line text-ellipsis',
                            on:{
                                click:(e) => {
                                    this.desModal.show = true;
                                    this.desModal.content = params.row.description;
                                }
                            }
                        });
                    }
                },
                {
                    title:'Topo',
                    key:'topo',
                    render:(h,params) => {
                        return h('a',{
                            on:{
                                click:() => {
                                    this.$refs.templateDetailModal.showModal(this.edit.curTemplateType === 'research' ? params.row.id : params.row)
                                }
                            }
                        },'查看')
                    }
                },
                {
                    title: '设计者',
                    key: 'creatorName',
                    align: 'left',
                },
                // {
                //     title: '创建时间',
                //     key: 'created',
                //     minWidth: 120,
                //     align: 'left'
                // },
                {
                    title: '操作',
                    key: 'actionCustom',
                    align: 'left',
                    width: 120,
                    render: (h, params) => {
                        let tempUserFlag;
                        let listMatchId = params.row.matchId || params.row.id;
                        let storeMatchId =
                            this.formValidate.templRelationId || this.formValidate.tmplId;
                        tempUserFlag = listMatchId === storeMatchId;
                        let text = '';
                        if (tempUserFlag) {
                            text = '已用';
                        } else {
                            text = '使用';
                        }
                        // let status = this.getResourceDisStatus(
                        //     params.row.visibility === 'private',
                        //     params.row.creator
                        // );
                        //						(this.formValidate.public == 1 || !this.isOwn) && params.row.visibility == 'private'
                        return h(
                            'a',
                            {
                                style: {
                                    //								'display': 'flex',
                                    //								'justify-content': 'flex-start',
                                    //								'align-items': 'center',
                                    color: tempUserFlag ? '#2d8cf0' : '#515a6e',
                                    // cursor: tempUserFlag ? 'not-allowed' : 'pointer'
                                },
                            },
                            [
                                h(
                                    'div',
                                    {
                                        on: {
                                            click: () => {
                                                if (tempUserFlag) {
                                                    //this.$Message.warning('单位的课件不允许选择个人资源');
                                                    return;
                                                }
                                                this.chooseTemp(params);
                                            },
                                        },
                                        style: {
                                            //									'margin-left': '15px',
                                        },
                                    },
                                    [
                                        h('img', {
                                            attrs: {
                                                src: tempUserFlag
                                                    ? require('../../../assets/globalIcon/choosed.png')
                                                    : require('../../../assets/globalIcon/add.png'),
                                            },
                                            style: {
                                                'margin-right': '5px',
                                                'vertical-align': 'middle',
                                                width: '16px',
                                                height: '16px',
                                                display: 'inline-block',
                                            },
                                        }),
                                        h('span', {}, text),
                                    ]
                                ),
                            ]
                        );
                    },
                },
            ],
            searchTemplateName: '',
            proTemLoading: false,
            searchTemNameInput: '',
            selectProTemModel: '',
            templateVisibility: '',
            desModal:{
                show:false,
                content:''
            }
        };
    },
    computed: {
        disModifyTemplate() {
            return (
                this.contentDetail.deployStatus &&
                ![0, 10].includes(this.contentDetail.deployStatus)
            );
        },
        contentDetail() {
            return this.detailParent.contentDetail;
        },
        contentId() {
            return this.contentDetail.id;
        },
    },
    watch: {
        contentDetail: {
            handler(val) {
                let { tmplId, tmplName, templRelationId } = this.contentDetail;
                this.formValidate.tmplId = tmplId;
                this.formValidate.tmplName = tmplName;
                this.formValidate.templRelationId = templRelationId;
            },
        },
    },
    created() {
        this.queryTypeRecordAll();
        this.setStyle();
        this.openDesignModal();
    },
    mounted() {},
    methods: {
        changeStep(step){
            this.step = step
            if(this.edit.curSelectType === 'research'){
                this.refreshTem('research')
            }else if(this.edit.curSelectType === 'projectTemplate'){
                this.refreshTem('projectTemplate')
            }
        },
        getTemplateCol() {
            if (this.edit.curTemplateType === 'research') {
                return this.templateCol.filter((item) => item.title !== '可见范围');
            } else {
                return this.templateCol.filter(item => item.title !== '内置类型');
            }
        },
        // 设置高度
        setStyle() {
            window.fullHeight = document.documentElement.clientHeight;
            window.fullWidth = document.documentElement.clientWidth;
            this.fullHeight = window.fullHeight;
            this.fullWidth = window.fullWidth;
            this.setUserTableHei = this.fullHeight - 212;
        },
        openDesignModal(data) {
            this.designModal.show = true;
            // this.contentDetail = data;
            // this.$refs.formValidate.resetFields();
            let { tmplId, tmplName, id, templRelationId } = this.contentDetail;
            if (!id) {
                return;
            }
            this.formValidate.tmplId = tmplId;
            this.formValidate.tmplName = tmplName;
            this.formValidate.templRelationId = templRelationId;
        },
        changeInternal(val) {
            //改变是否使用内置模板
            this.formValidate.typeId = '';
            this.formValidate.tmplId = '';
            this.formValidate.tmplName = '';
            this.formValidate.templRelationId = '';
            this.$refs.formValidate.resetFields();
            this.formValidate.internal = val;
            this.edit.curSelectType = 'projectTemplate';
        },
        cancelLoading() {
            this.designModal.loading = false;
            setTimeout(() => {
                this.designModal.loading = true;
            });
        },
        // 创建工程，并绑定工程与案例关联关系，关系绑定完成后，跳转至拓扑图页面
        createProject() {
            if (!this.formValidate.tmplId && this.edit.curSelectType !== 'topo') {
                this.$Message.error('请先选择或生成模板');
                this.cancelLoading();
                return;
            }
            this.$refs.formValidate.validate((valid) => {
                if (valid) {
                    let tmplId = this.formValidate.tmplId;
                    return new Promise((resolve) => {
                        creatBlankPro(
                            this.edit.curSelectType !== 'topo' && tmplId ? tmplId : '',
                            {
                                mode: 'complete',
                                name: this.contentDetail.name,
                                quotaTypeId: '2',
                                trainId: 0,
                                type: 'normal',
                            },
                            'complete'
                        )
                            .then(data => {
                                let { code, message, attribute } = data;
                                if (![1, 2].includes(code)) {
                                    // 成功或导入中均不需要报错
                                    this.$Message.warning(message);
                                    this.cancelLoading();
                                    return;
                                }
                                let result = attribute.result;
                                data = {
                                    projectId: result.id,
                                    tmplId: this.formValidate.tmplId,
                                    tmplName: this.formValidate.tmplName,
                                    typeId: this.formValidate.typeId,
                                    internal: this.formValidate.internal
                                };
                                if (this.formValidate.internal === 1) {
                                    //内置模板
                                    data.templRelationId = this.formValidate.templRelationId; //内置模板关联id
                                }
                                if (this.copyContentId) {
                                    copyContentRelation({
                                        newContentId: this.contentId,
                                        oldContentId: this.copyContentId,
                                    }).then(({ code, data, message }) => {
                                        if (code === 1) {
                                            // 复制成功之后创新
                                            this.detailParent && this.detailParent.refreshDocInfo();
                                        }
                                    });
                                }
                                updateContent(this.contentId, data)
                                    .then(({ code, message }) => {
                                        if (code !== 1) {
                                            this.$Message.warning(message);
                                            return;
                                        }
                                        this.designModal.show = false;
                                        this.$emit('ok');
                                        this.detailParent && this.detailParent.getContentDetail();
                                    })
                                    .catch(() => {
                                        this.$Message.error('修改科研信息异常');
                                    })
                                    .finally(() => {
                                        this.cancelLoading();
                                        resolve();
                                    });
                            })
                            .catch(() => {
                                this.$Message.error('创建拓扑图异常');
                                this.cancelLoading();
                                resolve();
                            });
                    });
                } else {
                    this.cancelLoading();
                }
            });
        },
        getResourceDisStatus(isPrivate, creator) {
            let isNotOwn = !(this.USER_ID == this.formValidate.createUserId || this.isCreate);
            let isNotCommonCreator = this.formValidate.createUserId !== creator && !this.isCreate;
            return (this.formValidate.public == 1 || (isNotOwn && isNotCommonCreator)) && isPrivate;
        },
        chooseTemp(params) {
            if (params.row.tempUserFlag) {
                this.$Message.info({
                    content: '已使用该模板！',
                    duration: 3,
                });
            } else {
                let _index = params.row._index;
                for (let i = 0; i < this.templateList.length; i++) {
                    this.templateList[i].tempUserFlag = false;
                }
                this.$set(this.templateList[_index], 'tempUserFlag', true);
                this.getTemplateInfo(params.row);
                // this.formValidate.envtempid = params.row.name;
                // this.useTemplateId = params.row.id;
                //存储模板可见范围
                this.useTempVisibility = params.row.visibility;
            }
        },
        getTemplateInfo(info) {
            if (this.disModifyTemplate) {
                this.$Message.warning('请先销毁环境');
                return;
            }
            this.formValidate.tmplId = info.id;
            this.formValidate.templRelationId = info.matchId; //内置模板与模板的关联Id
            this.formValidate.tmplName = info.name;
            this.formValidate.typeId = info.typeId;
            if (this.edit.curSelectType === 'exper') {
                this.copyContentId = info.contentId;
            } else {
                this.copyContentId = '';
            }
            //存储模板可见范围
            this.useTempVisibility = 'private';
            // this.updateContent(); //确定再保存
        },
        // 更新模板信息
        updateContent() {
            updateContent(this.contentId, this.formValidate)
                .then(({ code, message }) => {
                    if (code === 1) {
                        this.$Message.info('修改模板信息成功');
                        let { tmplId, tmplName } = this.formValidate;
                        this.detailParent.updateDetail({ tmplId, tmplName });
                    } else {
                        this.$Message.error(message);
                    }
                })
                .catch((error) => {});
        },
        handChangeSelectType(val) {
            this.edit.curSelectType = val;
        },
        clearTemp() {
            this.formValidate.tmplId = '';
            this.formValidate.tmplName = '';
            this.copyContentId = '';
            // this.updateContent();
        },
        // 选择工程模板
        toPlateTabs(type) {
            this.templateList = [];
            let params = {
                pageIndex: this.templatePage,
                pageSize: this.templatePageSize,
            };
            let data = {
                name: this.searchTemplateName,
                visibility: this.templateVisibility,
                type: 'project',
                markType: this.searchTemType
            };
            this.proTemLoading = true;
            let reqApi;
            if (this.edit.curTemplateType === 'research') {
                reqApi = queryTemplRelation({
                    ...params,
                    typeId: this.searchTemType,
                    templName: this.searchTemplateName,
                });
            } else {
                reqApi = getTemplateData(data, params);
            }
            reqApi
                .then(({ code, data: { items, total }, message }) => {
                    if (code === 1) {
                        this.templateTotal = Number(total);
                        for (let i = 0; i < items.length; i++) {
                            items[i].tempUserFlag = false;
                            items[i].matchId = items[i].id; //使用已用匹配
                            if (this.edit.curTemplateType === 'research') {
                                //内置模板
                                items[i].matchId = items[i].id; //使用已用匹配
                                items[i].name = items[i].templName;
                                items[i].id = items[i].templId;
                                items[i].typeName = this.handleTypeRecord(items[i].typeId);
                                if (items[i].id === this.formValidate.templRelationId) {
                                    items[i].tempUserFlag = true;
                                }
                            } else {
                                if (items[i].id === this.formValidate.tmplId) {
                                    items[i].tempUserFlag = true;
                                }
                            }
                        }
                        this.templateList = items;
                    } else {
                        this.templateList = [];
                        this.templateTotal = 0;
                    }
                    this.proTemLoading = false;
                })
                .catch((err) => {
                    this.proTemLoading = false;
                    console.log(err);
                });
        },
        setPageAndSize(page, size) {
            this.templatePageSize = size;
            this.templatePage = page;
            this.toPlateTabs();
        },
        temOnChange(val) {
            this.templatePage = val;
            this.toPlateTabs();
        },
        changeTemplate(val) {
            this.templatePage = 1;
            this.templateVisibility = val;
            this.toPlateTabs();
        },
        changeTemType(){
            this.templatePage = 1;
            this.toPlateTabs();
        },
        searchTemNameBtn(val) {
            this.templatePage = 1;
            this.searchTemplateName = this.searchTemNameInput;
            this.toPlateTabs();
        },
        refreshTem(type,isRefresh) {
            // if(type === 'research' && !this.formValidate.typeId){
            //     this.$Message.info('请先选择内置类型');
            //     return
            // }
            this.templateList = [];
            this.edit.curTemplateType = type;
            this.templatePage = 1;
            this.searchTemplateName = '';
            this.searchTemNameInput = '';
            this.searchTemType = type === 'research' ? '' : '0';
            this.templateVisibility = '';
            this.selectProTemModel = '';
            this.addDeviceModel = true;
            this.toPlateTabs();
        },
        closeDistribution() {
            this.addDeviceModel = false;
        },
        handlePublic(val) {
            let obj = {
                text: '',
                color: '#8d95a6',
            };
            switch (val) {
                case 'private':
                case 0:
                case '0':
                    return (obj = {
                        text: '个人',
                        color: 'rgb(255, 165, 0)',
                    });
                    break;
                case 'share':
                case 1:
                case '1':
                    return (obj = {
                        text: '单位',
                        color: 'rgb(50, 205, 50)',
                    });
                    break;
                case 'public':
                case 2:
                case '2':
                    return (obj = {
                        text: '系统',
                        color: 'rgb(65, 105, 225)',
                    });
                    break;
            }
        }
    },
};
</script>
<style scoped>
.w150 {
    width: 150px;
}
.select-content-wrapper {
    margin-top: 20px;
}
.select-type-wrapper {
    display: flex;
    justify-content: space-between;
    height: 32px;
    --checkbox-active-bgcolor: #3a3ad1;
    --checkbox-btn-checked-color: #fff;
    /* width: 360px; */
    border: 1px solid var(--checkbox-active-bgcolor);
}
.select-type-wrapper .type {
    flex: 1;
    text-align: center;
    background: #fff;
    border-right: 1px solid var(--checkbox-active-bgcolor);
    color: var(--checkbox-active-bgcolor);
    cursor: pointer;
}
.select-type-wrapper .type.current {
    background: var(--checkbox-active-bgcolor);
    color: var(--checkbox-btn-checked-color);
}
.select-type-wrapper .type:last-child {
    border-right: none;
}

.chose-wrap {
    display: flex;
    justify-content: space-between;
    padding: 3px 8px;
    background-color: rgb(245, 248, 255);
    align-items: center;
    margin-top: 10px;
}
.chose-name {
    width: 300px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chose-image {
    display: inline-block;
    height: 32px;
    width: auto;
    vertical-align: middle;
}
.del-icon {
    width: 13px;
    height: 14px;
    cursor: pointer;
}

.drawer-title {
    font-size: 14px;
    font-weight: 700;
}
.environ-design-card{
    display: flex;
    flex-direction: column;
    height:100%;
    width:60%;
    margin: auto;
}
.environ-design-card h2{
    padding:4px 0;
    text-align: center;
}
.environ-design-card /deep/ .ivu-card-body{
    flex:auto;
    display: flex;
    flex-direction: column;
    height:0;
    padding:0;
    /* overflow: auto; */
}
.design-type-wrapper{
    /* display: flex;
    align-items: center;
    border: 1px dashed #DBDFE9;
    padding: 16px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 16px;
    box-sizing: content-box; */
}
.design-type-wrapper.design-type-checked{
    /* background: #eeebf9;
    border-color: #3838d3; */
}
.design-op-wrapper{
    /* position: absolute; */
    /* bottom: 0;
    left: 0;
    right: 0; */
    border-top:1px solid #e8eaec;
    /* z-index: 2; */
    background: #fff;
}
.list-wrapper{
    flex: auto;
    overflow: auto;
}
.template-list{
    display: flex;
    flex-wrap: wrap;
}
.template-item{
    width: 24%;
    margin: 0.5%;
    height: 100px;
    display: flex;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    overflow: hidden;
}
.template-img{
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex: none;
    margin-right: 10px
}
.template-content{
    flex:auto;
    width: 0;
}
.template-title{
    width:100%;
    font-weight: bold;
}
.template-info > p{
    width:100%;
}
</style>
